<!--  -->
<template>
	<view><!-- 唯一的根标签 相当于div，最外层就一个view-->
		<view>
			{{username}}
		</view>
		<view>
			{{message}}
		</view>
		<view>
			{{learn_vue}}
		</view>
		<!--  循环遍历数组，将数组提取出一个放到one-->
		<view v-for="one in tel">
			{{one}}
		</view>
		<!-- 条件判断 -->
		<view v-if="age>=20">
		<!-- @tap="signUp() ,点击事件捕获，要在script下main写具体的方法内容-->
			<button @tap="signUp()">v-if条件判断</button>
		</view>
		<view>
			<!-- 数据的双向绑定，v-model="address" -->
			<input type="text" v-model="address" placeholder="输入地址"/>
		</view>
		<view>v-model双向绑定：{{address}}</view><!--  -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "Scott",
				message: "uni-app,基于VUE的跨平台移动端框架，语法简单，学习成本很低",
				learn_vue: "基础语法：插值输出、条件判断、循环输出、事件处理、双向绑定",
				tel: ['123456', '654321'],
				age: 20,
				address:""
			}
		},
		methods: {
			signUp: function() {
				//弹出面包屑通知、过几秒自动消失的消息， 称作面包屑消息
				uni.showToast({
					title: "弹出面包屑通知"
				})
			}

		}
	}
</script>

<style>
</style>
